@(query: String, wordOpt: Option[Word], topWords: List[String])(implicit request: RequestHeader)

@import utils.RequestHelper._
@main("PlayScala社区 - 词典搜索", "dict") {
<link rel="stylesheet" href="/assets/plugins/quill/quill.snow.css">
<link rel="stylesheet" href="/assets/plugins/quill/quill-emoji.css">
<link rel="stylesheet" href="/assets/plugins/highlight/styles/monokai-sublime.css">
<style>
  /* Set default font-family */
  #quill-container {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, "STHeiti Light", Tahoma, Arial, sans-serif;
      height: 200px;
  }
  .layui-upload-file, .layui-upload-button { display: none;}

  .ql-editor {
      padding: 0px 15px;
      color: #3d464d;
      white-space: normal;
  }
  .ql-editor p, .ql-editor ol, .ql-editor ul {
      line-height: 28px;
  }
  .ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
      margin: 5px 0px 5px;
      padding: 10px 0px 5px;
  }
  .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
      margin-top: 15px;
  }

  .ql-editor ul li, .ql-editor ul li {
      padding: 0px;
      border: 0px;
  }

  .fly-list .fly-list-li { height: auto; }
  .fly-list-li h2 a { font-size: 18px; }
  .fly-panel-title a { padding: 0px; }
  .fly-list li {
    position: relative;
    height: 45px;
    line-height: 22px;
    padding: 15px 15px 15px 15px;
    border-bottom: 1px dotted #e2e2e2;
  }
  p.content { color: #545454; font-size: 13px; }
  .play-audio {
      background-image: url(/assets/images/sound.png);
      background-repeat: no-repeat;
  }
</style>
@searchBar(query)
<div class="layui-container">
    <div class="layui-row  layui-col-space15">
        <div class="layui-col-md10 content detail">
            @if(wordOpt.nonEmpty) {
                <div class="fly-panel detail-box">
                    <span style="font-size: 32px;">@wordOpt.get._id</span>
                    <span style="font-size: 15px; margin-left: 5px;">@wordOpt.get.pronounce</span>
                    <span style="margin-left: 5px; cursor: pointer;"><i class="play-audio" title="发音" audio-url='@wordOpt.get.audioUrl'>　</i></span>
                    <div class="fly-detail-info">
                    </div>
                    <div class="fly-detail-info">
                        @if(wordOpt.exists(!_.isReviewed)) {
                            <span class="layui-badge layui-bg-red fly-detail-column">待审核</span>
                        }
                        @for(tag <- wordOpt.get.tags) {
                            <span class="layui-badge layui-bg-green fly-detail-column"><a href="/dict/tag/@tag" class="layui-btn layui-btn-xs">@tag</a></span>
                        }
                        @if(request.session.get("login").exists(_ == wordOpt.get.creator) || isAdmin) {
                            <a href="/dict/edit?_id=@query" class="layui-btn layui-btn-primary">编辑</a>
                        }
                        @if(isAdmin){
                            <a href="/dict/pass?_id=@query" class="layui-btn layui-btn-primary">通过</a>
                            <a href="/dict/remove?_id=@query" class="layui-btn layui-btn-primary">删除</a>
                        }

                        @*<span class="layui-btn layui-btn-xs">流计算</span>*@
                        @*<span class="fly-list-nums">
                        <a href="#comment"><i class="iconfont" title="回答">&#xe60c;</i> 66</a>
                        <i class="iconfont" title="人气">&#xe60b;</i> 99999
                        </span>*@
                    </div>
                    <div class="detail-body photos ql-snow">
                        <div class="ql-editor"> @Html(wordOpt.get.content) </div>
                    </div>
                </div>
            } else {
                <div class="fly-panel detail-box">
                    非常抱歉，我们会尽快添加该词条！<a href="/dict/add?_id=@query" class="layui-btn"><i class="layui-icon layui-icon-edit"></i> 我来添加</a>
                </div>
            }
        </div>
        <div class="layui-col-md2">
            <dl class="fly-panel fly-list-one">
                <dt class="fly-panel-title">热门查询</dt>
                @for(w <- topWords) {
                    <dd>
                        <a href="/dict/@{w}">@w</a>
                    </dd>
                }
            </dl>
        </div>
    </div>
</div>
}

@if(wordOpt.nonEmpty){
<audio id='word-@{wordOpt.map(_._id).getOrElse("")}'>
    <source src='@{wordOpt.get.audioUrl}' type='@{wordOpt.get.audioType}'>
</audio>
}
<script>
var word = '@{wordOpt.map(_._id).getOrElse("")}';

$('.play-audio').click(function(){
  //var audio = document.getElementById("word-" + word);
  var audio = new Audio($(this).attr('audio-url'));
  audio.currentTime = 0;
  audio.play();
});

</script>
